<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/c/font_4987107_y3i6skmfqr.css"
    />
    <link rel="stylesheet" href="./css/reset.css" />

    <style>
      .banner {
        height: 460px;
        position: relative;
      }
      .banner .wrap {
        position: absolute;
        width: 1226px;
        height: 460px;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
         font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;

      }
      .banner-box {
        position: relative;
        width: 100%;
        height: 460px;
      }
      .banner-img {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: all 0.8s linear;
        cursor: pointer;
      }
      .banner-img > img {
        width: 100%;
        height: 460px;
      }

      .banner-img:first-child {
        opacity: 1;
      }

      /* 轮播按钮 */
      .banner-box .box-left {
        position: absolute;
        width: 40px;
        height: 70px;
        top: 195px;
        left: 234px;
        font-size: 28px;
        text-align: center;
        line-height: 70px;
        color: #ccc;
        border-radius: 0 5px 5px 0;
        cursor: pointer;
      }

      .banner-box .box-left:hover {
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
      }

      .banner-box .box-right {
        position: absolute;
        width: 40px;
        height: 70px;
        top: 195px;
        right: 0;
        font-size: 28px;
        text-align: center;
        line-height: 70px;
        color: #ccc;
        border-radius: 5px 0 0 5px;
      }

      .banner-box .box-right:hover {
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
      }

      .banner-box .box-circle {
        position: absolute;
        bottom: 25px;
        right: 50px;
      }

      .banner-box .btn-circle {
        float: left;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #33333380;
        margin-right: 12px;
        border: 1px solid #b0b0b0;
        cursor: pointer;
      }

      .banner-box .slide {
        width: 234px;
        height: 460px;
        background-color: rgba(105, 101, 101, 0.6);
        position: absolute;
        top: 0;
        left: 0;
        padding: 20px 0;
        
      }

      .banner-box .slide > ul > li {
        list-style: none;
        height: 42px;
        line-height: 42px;
        padding-left: 30px;
        cursor: pointer;
      }

      .banner-box .slide > ul > li > a {
        color: #fff;
      }
      .banner-box .slide > ul > li:hover {
        background-color: #ff6a00;
      }

      .banner-box .slide i {
        float: right;
        padding-right: 20px;
        color: #fff;
      }
      .banner-box .slide > ul > li:hover > i {
        color: #b0b0b0;
      }

      .slide-list {
        position: absolute;
        left: 234px;
        top: 0;
        width: 600px;
        height: 460px;
        background-color: #fff;
        display: none;
      }

      .slide-list > ul {
        float: left;
        width: 247px;
        height: 456px;
        padding: 2px 0;
      }
      .slide-list > ul > li {
        width: 100%;
        height: 76px;
        padding-left: 20px;
      }

      .slide-list li:hover > a {
        color: #ff6a00;
      }

      .slide-list a {
        display: block;
        width: 100%;
        height: 76px;
        color: #333;
        line-height: 76px;
        font-size: 14px;
      }
      .slide-list img {
        margin-top: 18px;
        float: left;
        margin-right: 10px;
      }

      .slide-list span {
        display: inline-block;
        float: left;
      }
      .slide li:hover > .slide-list {
        display: block;
      }

      .slide-list-width-one {
        width: 600px;
      }

      .slide-list-width-two {
        width: 992px;
      }

      .ad {
        width: 100%;
        height: 170px;
        margin: 15px 0 25px;
      }

      .ad_aside {
        float: left;
        width: 234px;
        height: 170px;
        background-color: #5f5750;
      }

      .ad_aside li {
        width: 76px;
        height: 82px;

        float: left;
        text-align: center;
        /* border: 1px solid #fff; */
        cursor: pointer;
        margin-left: 1px;
        margin-top: 2px;
        position: relative;
      }

      .ad_aside > ul > li > a {
        display: block;
        width: 70px;
        height: 64px;
        margin-left: 5px;
        margin-top: 18px;
        position: relative;
      }

      .ad_aside > ul > li > a > i {
        color: #cfcdcb;
        font-size: 30px;
      }

      .ad_aside > ul > li > a > p {
        color: #cfcdcb;
        font-size: 12px;
        margin-top: 4px;
      }

      .ad_aside > ul > li:hover > a > i,
      .ad_aside > ul > li:hover > a > p {
        color: #fff;
      }

      .ad_box {
        float: left;
        width: 316px;
        height: 170px;
        margin-left: 14px;
      }

      .ad_box img {
        width: 316px;
        height: 170px;
      }

      .ad_box:hover {
        box-shadow: 0 4px 5px #b0b0b080;
      }

      .ad_aside > ul > li > a::before {
        position: absolute;
        left: 1%;
        top: 0;
        content: "";
        width: 1px;
        height: 55px;
        background-color: #b0b0b020;
      }

      .ad_aside > ul > li::before {
        position: absolute;
        top: 5%;
        left: 20%;
        content: "";
        width: 55px;
        height: 1px;
        background-color: #b0b0b020;
      }
    </style>
  </head>
  <body>
    <div class="banner">
      <div class="wrap">
        <div class="banner-box">
          <div class="banner-img">
            <img src="./img/banner_bg_01.webp" alt="" />
          </div>
          <div class="banner-img">
            <img src="./img/banner_bg_02.jpg" alt="" />
          </div>
          <div class="banner-img">
            <img src="./img/banner_bg_01.webp" alt="" />
          </div>
          <div class="banner-img">
            <img src="./img/banner_bg_02.jpg" alt="" />
          </div>
          <div class="banner-img">
            <img src="./img/banner_bg_01.webp" alt="" />
          </div>
          <div class="banner-img">
            <img src="./img/banner_bg_02.jpg" alt="" />
          </div>

          <div class="box-left">&lt;</div>
          <div class="box-right">&gt;</div>
          <div class="box-circle">
            <ul>
              <li class="btn-circle"></li>
              <li class="btn-circle"></li>
              <li class="btn-circle"></li>
              <li class="btn-circle"></li>
              <li class="btn-circle"></li>
              <li class="btn-circle"></li>
            </ul>
          </div>

          <div class="slide">
            <ul>
              <li>
                <a href="#">手机</a><i class="iconfont icon-icon"></i>
                <div class="slide-list slide-list-width-one">
                  <ul>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>Xiaomi手机 </span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                  </ul>
                  <ul>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-02.webp" alt="" />
                        <span>REDMI手机</span></a
                      >
                    </li>
                  </ul>
                </div>
              </li>
              <li>
                <a href="#">电视</a><i class="iconfont icon-icon"></i>
                <div class="slide-list slide-list-width-one">
                  <ul>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>Xiaom电视 </span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                  </ul>
                  <ul>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-02.webp" alt="" />
                        <span>REDMI手机</span></a
                      >
                    </li>
                  </ul>
                </div>
              </li>
              <li><a href="#">家电</a><i class="iconfont icon-icon"></i></li>
              <li>
                <a href="#">笔记本 平板 显示器</a
                ><i class="iconfont icon-icon"> </i>

                <div class="slide-list slide-list-width-two">
                  <ul>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>Xiaom电视 </span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                  </ul>
                  <ul>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>Xiaom手表 </span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-02.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                  </ul>
                  <ul>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>Xiaom影视 </span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-03.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                  </ul>
                  <ul>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>Xiaom电脑 </span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-04.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                    <li>
                      <a href="#">
                        <img src="./img/slide-img-list-01.webp" alt="" />
                        <span>数字旗舰</span></a
                      >
                    </li>
                  </ul>
                </div>
              </li>
              <li>
                <a href="#">出行 穿戴</a><i class="iconfont icon-icon"></i>
              </li>
              <li>
                <a href="#">耳机 音响</a><i class="iconfont icon-icon"></i>
              </li>
              <li>
                <a href="#">健康 儿童</a><i class="iconfont icon-icon"></i>
              </li>
              <li>
                <a href="#">生活 箱包</a><i class="iconfont icon-icon"></i>
              </li>
              <li>
                <a href="#">智能 路由器</a><i class="iconfont icon-icon"></i>
              </li>
              <li>
                <a href="#">电源 配件</a><i class="iconfont icon-icon"></i>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="banner ad">
      <div class="wrap">
        <div class="ad_aside">
          <ul>
            <li>
              <a href="#">
                <i class="iconfont icon-yijiuhuanxin"></i>
                <p>保障服务</p>
              </a>
            </li>
            <li>
              <a href="#">
                <i class="iconfont icon-yijiuhuanxin"></i>
                <p>保障服务</p>
              </a>
            </li>
            <li>
              <a href="#">
                <i class="iconfont icon-yijiuhuanxin"></i>
                <p>保障服务</p>
              </a>
            </li>
            <li>
              <a href="#">
                <i class="iconfont icon-yijiuhuanxin"></i>
                <p>保障服务</p>
              </a>
            </li>
            <li>
              <a href="#">
                <i class="iconfont icon-yijiuhuanxin"></i>
                <p>保障服务</p>
              </a>
            </li>
            <li>
              <a href="#">
                <i class="iconfont icon-yijiuhuanxin"></i>
                <p>保障服务</p>
              </a>
            </li>
          </ul>
        </div>
        <!-- one -->
        <div class="ad_box">
          <a href="#">
            <img src="./img/ad_01.png" alt="" />
          </a>
        </div>
        <!-- two -->
        <div class="ad_box">
          <a href="#">
            <img src="./img/ad_01.png" alt="" />
          </a>
        </div>
        <!-- three -->
        <div class="ad_box">
          <a href="#">
            <img src="./img/ad_01.png" alt="" />
          </a>
        </div>
      </div>
    </div>
    <script src="./banner.js"></script>
  </body>
</html>
